<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>

<%
	request.setAttribute("modelConfigPath", "contact");
%>
	
<%@ include file="/WEB-INF/views/shared/master/contentHeader.jsp"%>
<%@ include file="/WEB-INF/views/shared/master/index.jsp"%>

<style type="text/css">
	.div-property{
		text-align:center;
		position:absolute;
		width:20%;
		
		font-size:1.4em;
	}
	
	.inputbox-property{
		border:2px solid #A6FFA6;
		text-align:center;
		width:100%;
	}
	
	.input-onfocus{
		border:0px;
		box-shadow:0px 0px 10px #FF60AF;
	}
</style>

<t:panel cssClass="panel-flat border-top-xlg border-top-primary" customBody="true" customHead="true">
	<div style="height:540px">
		<t:form onSuccess="onSuccess" ajaxPost="true" commandName="student" action="/admin/user/personal/saveStudent">
			<t:input path="employeeId" style="display:none" />
			<t:input path="avatar" style="display:none"/>
			
			<img style="width:14%;border-radius:50%;position:absolute;left:43%;top:27%" alt="暂无照片" src="${student.avatar }" 
				 onerror="javascript:this.src='<c:url value="/images/default_avatar.jpg" />'" 
				 id="studentAvatar" name="studentAvatar" onclick="selectAvatar()" />
			
			<div style="left:40%;top:15%" class="div-property">
				<t:label path="sex" />
				<t:selectButton path="sex" />
			</div>
			
			<div style="left:23%;top:5%" class="div-property">
				<t:label path="employeeAccount"/>
				<t:input path="employeeAccount" />
			</div>
			
			<div style="left:57%;top:5%" class="div-property">
				<t:label path="studentName"/>
				<t:input path="studentName" />
			</div>
			
			<div style="left:10%;top:20%" class="div-property">
				<t:label path="admissionDate"/>
				<t:date path="admissionDate" />
			</div>
			
			<div style="left:70%;top:20%" class="div-property">
				<t:label path="graduationDate"/>
				<t:date path="graduationDate" />
			</div>
			
			<div style="left:17%;top:35%" class="div-property">
				<t:label path="mobile"/>
				<t:input path="mobile" />
			</div>
			
			<div style="left:63%;top:35%" class="div-property">
				<t:label path="email"/>
				<t:input path="email" />
			</div>
			
			<div style="left:24%;top:50%" class="div-property">
				<t:label path="education"/>
				<t:input path="education" />
			</div>
			
			<div style="left:56%;top:50%" class="div-property">
				<t:label path="studentId"/>
				<t:input path="studentId" />
			</div>
			
			<div style="left:40%;top:62%" class="div-property">
				<t:label path="comments"/>
				<t:textarea path="comments" rows="3" />
			</div>
			
			<div style="left:40%;top:87%" class="div-property">
				<button id="save" onclick="saveData()" style="background:#53FF53;border:1px solid #A6FFA6;border-radius:10px">保&nbsp;&nbsp;&nbsp;&nbsp;存</button>
			</div>
		</t:form>
	</div>
</t:panel>

<iframe id="uploadAvatar" name="uploadAvatar" style="display:none" src="<c:url value='/admin/user/upload/uploadAvatar/' />" ></iframe>

<script	type="text/javascript">
	function saveData(){
		if (!$("form:first").valid()) {
			return;
		}
		
		$("#save").attr("disabled",true);
		
		$("form:first").submit();
	}
	
	function actionResultCallBack(){
		var baseOperate={
			close:false,
			refresh:false
		}
		return baseOperate;
	}
	
	function onSuccess(res){
		if(res=="success"){
			$.topNotify("保存成功","success");
		}else{
			$.topNotify("保存失败","error");
		}
		
		$("#save").attr("disabled",false);
	}
	
	function selectAvatar(){
		window.frames["uploadAvatar"].$("#openFile").click();
	}
	
	function setAvatar(imgInfo){
		if(null==imgInfo||""==imgInfo)
			return;
		var avatarPath="<c:url value='/images/avatar/' />"+imgInfo;
		$("#avatar").val(avatarPath);
		$("#studentAvatar").attr("src",avatarPath);
	}
	
	$(function(){
		$(".form-control").addClass("inputbox-property");
		$(".form-control").removeClass("form-control");
		$(".control-label.cursor-pointer.text-right").css("marginBottom",0);
		
		$(".inputbox-property").on("mouseenter",function(){
			$(this).addClass("input-onfocus");
		});
		$(".inputbox-property").on("mouseleave",function(){
			$(this).removeClass("input-onfocus");
		});
		
		$("#save").on("mousedown",function(){
			$(this).css("background","#79FF79");
		});
		$("#save").on("mouseup",function(){
			$(this).css("background","#53FF53");
		});
		$("#save").on("mouseleave",function(){
			$(this).css("background","#53FF53");
		});
	});
</script>

<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/formselects.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/formpickers.jsp"%>
<%@ include file="/WEB-INF/views/shared/master/dialog.jsp"%>
<%@ include file="/WEB-INF/views/shared/master/contentFooter.jsp"%>